<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>赵益嘉的个人主页</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
          integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
          crossorigin="anonymous"></script>
</head>

<body>
<!--主页-->
<div class="home">
  <!--导航区-->
  <nav class="navbar navbar-collapse  navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <!--菜单按钮仅在移动端显示-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation"
                aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <h4>Lovely-iliya的个人主页</h4>
      </div>
      <!--导航链接-->
      <div class="collapse navbar-collapse" id="navigation">
        <ul class="anav">
          <li><a href="#about">关于</a></li>
          <li><a href="#exhibition">展示</a></li>
          <li><a href="#contact">联系</a></li>
        </ul>
      </div>
    </div>
  </nav>
  <!--头像-->
  <img class="touxiang" src="images/touxiang.png">
  <!--名字-->
  <div class="name"><em>赵益嘉</em></div>
</div>
<!--信息-->
<div id="about">
  <div class="context container">
    <div class="row">
      <!--左半部分-->
      <div class="t1 col-md-6">
        <h3>关于</h3>
        <p>嗨！我是赵益嘉，一名在校生。</p>
        <p>正在学习前端知识，目前已经熟练使用：HTML+CSS+JavaScript；常用框架：VUE、uniapp。了解并使用过的组件库：Element、bootstrap、Echarts。了解打包工具webpack。</p>
      </div>
      <!--右半部分-->
      <div class="t2 col-md-6">
        <h3>基本信息</h3>
        <div class="row">
          <div class="col-md-4">
            <p><b>年龄：</b></p>
          </div>
          <div class="col-md-8">
            <p>20</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p><b>邮箱：</b></p>
          </div>
          <div class="col-md-8">
            <p>975023831@qq.com</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p><b>QQ：</b></p>
          </div>
          <div class="col-md-8">
            <p>975023831</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <p><b>微信：</b></p>
          </div>
          <div class="col-md-8">
            <p>ZYJ12157</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--展示-->
<div id="exhibition" class="container-fluid">
  <div class="h2">展示</div>
  <div class="row">
    <!--第一列-->
    <div class="col-md-4">
      <div class="box">
        <a href="https://github.com/LovelyIliya">
          <img src="images/github.jpeg">
          <div class="mask">
            <div class="h2">我的github主页</div>
            <div class="text">做了几个Demo(点击访问，访问可能需要加速器)</div>
          </div>
        </a>
      </div>
      <div class="box">
        <a href="https://gitee.com/lovelyiliya/vueshop">
          <img src="images/one.png">
          <div class="mask">
            <div class="h2">电商后台管理系统</div>
            <div class="text">使用VUE框架编写的前后端分离的后台管理系统，技术栈：vue全家桶+Element，点击查看源码</div>
          </div>
        </a>
      </div>
      <div class="box">
        <a href="http://lovelyiliya.gitee.io/echartspanel">
          <img src="images/four.png">
          <div class="mask">
            <div class="h2">数据可视化面板</div>
            <div class="text">应用Echarts组件编写的数据可视化面板，点击即可在线预览</div>
          </div>
        </a>
      </div>
    </div>
    <!--第二列-->
    <div class="col-md-4">
      <div class="box">
        <a href="https://gitee.com/lovelyiliya">
          <img src="images/gitee.jpg">
          <div class="mask">
            <div class="h2">码云</div>
            <div class="text">做了几个Demo(点击访问)</div>
          </div>
        </a>
      </div>
      <div class="box">
        <a href="https://gitee.com/lovelyiliya/TakeoutShop">
          <img src="images/two.png">
          <div class="mask">
            <div class="h2">外卖平台</div>
            <div class="text">使用VUE框架编写的前后端分离的移动端外卖平台，实现了外卖平台部分功能，点击查看源码</div>
          </div>
        </a>
      </div>
      <div class="box">
        <a href="#">
          <img src="images/five.png">
          <div class="mask">
            <div class="h2">我的个人主页</div>
            <div class="text">就是当前页面呐,源码进仓库自行查看</div>
          </div>
        </a>
      </div>
    </div>
    <!--第三列-->
    <div class="col-md-4">
      <div class="box">
        <a href="https://blog.csdn.net/zzz18789?spm=1010.2135.3001.5343">
          <img src="images/csdn.jpg">
          <div class="mask">
            <div class="h2">CSDN</div>
            <div class="text">偶尔会写写博客</div>
          </div>
        </a>
      </div>
      <div class="box">
        <a href="https://gitee.com/lovelyiliya/uni_shop">
          <img src="images/three.png">
          <div class="mask">
            <div class="h2">小程序商城</div>
            <div class="text">使用uniapp编写的前后端分离的小程序商城，实现了商城应用的部分功能，点击查看源码</div>
          </div>
        </a>
      </div>
      <div class="box">
        <img src="images/touxiang.png">
        <div class="mask">
          <div class="h2">暂无更多</div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--联系-->
<div id="contact">
  <!--卡片-->
  <div class="card container-fluid">
    <div class="h3">联系我</div>
    <div class="row">
      <!--左半部分-->
      <div class="col-md-6">
        <strong>欢迎随时联系我</strong>
        <div class="inp1">
          <input type="text" class="form-control" placeholder="主题">
          <span class="glyphicon glyphicon-comment"></span>
        </div>
        <textarea class="inp2 form-control" rows="3" style="resize: none"
                  placeholder="说点什么....&#13;(本网站没有服务器和数据库，此表单仅供观赏)"></textarea>
        <button class="nbtn">提交</button>
      </div>
      <!--右半部分-->
      <div class="right col-md-6">
        <div>
          <strong>地址</strong>
          <p>河南省商丘市</p>
        </div>
        <div>
          <strong>邮箱</strong>
          <p>975023831@qq.com</p>
        </div>
        <div>
          <strong>微信/QQ</strong>
          <p>
            <img src="images/wx.png">
            <img src="images/qq.jpg">
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
<!--底部-->
<div class="bottom">
  <p>本主页已使用Bootstrap做了响应式适配，手机和电脑均可访问！</p>
</div>
<link rel="stylesheet" href="css/index.css">
<script src="js/index.js"></script>
</body>
</html>
